<template>
	<view class="content">
		<nav-header bgColor="bg-custom-color" :isBack="true">
			<block slot="content">{{$t('safetyCenter.updateSafetyPassword')}}</block>
		</nav-header>

		<view class="cu-form-group">
			<view class="title">{{$t('safetyPassword.safetyPassword')}}</view>
			<input :placeholder="$t('safetyPassword.enterSafetyPassword')" name="safePassword" v-model="safePassword" />
		</view>
		
		<view class="cu-form-group">
			<view class="title">{{$t('safetyPassword.confirmPassword')}}</view>
			<input :placeholder="$t('safetyPassword.confirmPassword')" name="safePassword_" v-model="safePassword_" />
		</view>
		
		<view class="cu-form-group">
			<view class="title">{{$t('msgCode.verCode')}}</view>
			<input :placeholder="$t('msgCode.enterVerCode')" name="msgCode" v-model="msgCode" />
			<button class='cu-btn bg-et shadow' @tap="getMsgCode()">{{getMsgCodeText}}</button>
		</view>


		<view class="padding flex flex-direction back" style="margin-bottom: 60px;">
			<button class="cu-btn bg-et margin-tb-sm lg" @tap="btn">{{$t('sure')}}</button>
		</view>
	</view>


</template>

<script>
	var t
	export default {
		data() {
			return {
				safePassword:'',
				safePassword_:'',
				userInfo:null,
				msgCode:'',
				getMsgCodeTime: 60,
				getMsgCodeText: '获取验证码',
				isClickGetMsgCode: true,
			}
		},
		onLoad() {
			t = this
			this.$i18n.locale = t.$common.localRead("local")
			t.userInfo = $common.getUser()
			if (!t.userInfo) {
				$common.notLoginUser()
			}
			console.info(t.userInfo)
			t.getMsgCodeText = t.$t('msgCode.getVerCode');
		},
		methods: {
			btn() {
				if(!t.safePassword){
					$common.showToast($t('safetyPassword.safetyPasswordNotNull'));
					return;
				}
				if(!t.safePassword_){
					$common.showToast($t('safetyPassword.confirmPasswordNotNull'));
					return;
				}
				if(t.safePassword != t.safePassword_){
					$common.showToast($t('safetyPassword.safetyPasswordUnequal'));
					return;
				}
				
				let data = {
					userId: t.userInfo.id,
					safePassword: t.safePassword,
					safePassword_: t.safePassword_
				}
				t.$fetch.request('userInfo/updateSafePassword', data).then((res) => {
					console.info(res)
					if (res.code == 200) {
						console.info("保存成功")
						t.$common.setUser(res.data)
						// $common.showToast(t.$t('tip.updateSuccess'));
						$common.showToast('修改成功');
						t.$common.toPage('../home/home', 1, 1500)
					} else {
						$common.showToast(res.msg);
					}
				}).catch((e) => {})
			},
			setMsgCodeTime: function() {
				if (this.getMsgCodeTime > 0) {
					this.isClickGetMsgCode = !this.isClickGetMsgCode;
					let clock = window.setInterval(() => {
						if (this.getMsgCodeTime > 0) {
							this.getMsgCodeTime--;
							this.getMsgCodeText = this.getMsgCodeTime + 's后重新发送';
						} else {
							this.isClickGetMsgCode = !this.isClickGetMsgCode;
							this.getMsgCodeTime = 5;
							this.getMsgCodeText = '获取验证码'
							clearInterval(clock);
						}
					}, 1000);
				}
			},
			getMsgCode() {
				if (!t.isClickGetMsgCode) {
					return
				}
				let data = {
					id: t.userInfo.id,
				}
				t.$fetch.request('userInfo/sendMsgBindAddr', data, 'POST').then((res) => {
					if (res.code === 200) {
						t.$common.showToast("发送成功")
						t.setMsgCodeTime();
					} else {
						$common.showToast(res.msg);
					}
				}).catch((e) => {})
			
			},
		}
	}
</script>

<style>
	.cu-form-group {
		background-color: #121E2E;
	}

	.cu-form-group .title {
		color: #E6EEFF;
	}

	.uni-input-placeholder {
		color: #5C7392;
	}

	.uni-input-input {
		color: #5C7392;
	}

	.wallet .cu-item:after {
		border-bottom: 0px solid #ddd;
	}

	.wallet .cu-item {
		background-color: #121E2E;
	}

	.lc2-son-par {
		display: flex;
		height: 30px;
		line-height: 30px;
	}

	.lc2-son1-text {
		color: #5C7392;
		flex: 1;
		text-align: center;
	}

	.lc2-son2-text {
		flex: 1;
		text-align: center;
	}

	.cu-list.card-menu {
		overflow: hidden;
		margin-right: 0px;
		margin-left: 0px;
		border-radius: 0px;
	}

	.et-content {
		display: flex;
	}

	.et-text {
		flex: 1;
	}

	.lc1 {
		height: 60px;
		line-height: 60px;
		display: flex;
	}

	.lc1-box {
		/* display: inline-table; */
		flex: 1;
	}

	.lc1-1 {
		margin-left: 10px;
		font-weight: bold;
	}
</style>
